<!--
 * @Descripttion: 列表搜索组件
 * @version: 电子名片2.0
 * @Author: 冯健
 * @Date: 2020-12-03 14:33:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-16 16:10:06
-->
<template>
  <div class="search-box">
    <template v-for="item in search">
      <el-input
        v-if="item.type == 'input'"
        :key="item.key"
        v-model="item.value"
        class="input mr"
        clearable
        :placeholder="item.placeholder"
      />
      <el-date-picker
        v-else-if="item.type == 'daterange'"
        :key="item.key"
        v-model="item.value"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="input mr"
      />
      <el-select
        v-else-if="item.type == 'select'"
        :key="item.key"
        v-model="item.value"
        class="mr"
        clearable
        :placeholder="item.placeholder"
      >
        <el-option
          v-for="item2 in item.selectList"
          :key="item2.value"
          :label="item2.title"
          :value="item2.value"
        />
      </el-select>
      <el-cascader
        v-else-if="item.type == 'cascader'"
        :key="item.key"
        v-model="item.value"
        :options="item.options"
        :props="item.props"
        :placeholder="item.placeholder"
        :show-all-levels="false"
         clearable
        @change="handleChange">
      </el-cascader>
    </template>
    <slot name="param" />
    <el-button type="primary" @click="getList(search)">查询</el-button>
    <el-button @click="initParams(search)">重置</el-button>
    <slot name="button" />
  </div>
</template>

<script>
export default {
  props: {
    search: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    getSearch() {
      return this.search
    }
  },
  beforeDestroy() {
    // 页面跳转时重置搜索value
    Object.keys(this.getSearch).forEach(key => {
      this.getSearch[key].value = ''
    })
  },
  methods: {
    initParams(search) {
      search.forEach(item => {
        item.value = ''
      })
      this.$emit('init-params')
    },
    getList(search) {
      const _params = search.length > 0 ? {} : null;
      search.forEach(item => {
        if (item.value) {
          // 选择框里面有级联选择器
          if(Array.isArray(item.value)) {
            _params[item.key] = item.value.pop()
          }
          else{
             _params[item.key] = item.value
          }
        }
      })
      this.$emit('get-list', _params)
    },
    handleChange(value){
      console.log(value)
    }
  }
}
</script>

<style lang="scss" scoped>
    .input{
        width: 200px;
    }
    .mr{
        margin-right: 10px;
    }
</style>
